<template>
  <!-- 登录-表单验证 -->
  <transition name="van-fade">
    <div class="login-model">
      <van-nav-bar title="用户注册" />
      <div class="warning">
        微信和支付宝用户,自动注册为新用户
      </div>
      <div style="margin: 15px;">
        <van-button round block type="info" :disabled="disabledFlag" @click="bindOpenId"><span v-if="!disabledFlag">自动注册</span><van-loading type="spinner" v-if="disabledFlag" color="#1989fa" >自动注册中</van-loading></van-button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Index',
  components: {},
  props: [],
  data () {
    return {
      disabledFlag: true,
      isShowModel: false, // *登录界面判断 flag
      token: '', // *用户登录 token
      countDown: 0
    }
  },
  computed: {},
  created: function () {
    // 先判断是否是已经绑定用户
    if (this.$store.state.user) {
      this.$router.push('/')
    }
  },
  mounted () {
    this.bindOpenId()
  },
  watch: {},
  methods: {
    bindOpenId () {
      if (!sessionStorage.getItem('equipNo')) {
        this.$toast('没有设备号,请重新扫码')
        return
      }
      this.disabledFlag = true
      this.$http.post('/open/bindThirdId', this.$qs.stringify({ openId: sessionStorage.getItem('openid'), equipNo: sessionStorage.getItem('equipNo') })).then(res => {
        if (res.code === 200) {
          this.$toast.success('注册成功，进入系统')
          this.disabledFlag = false
          setTimeout(() => {
            // ? 这里使用的是箭头函数，this 指向函数外层
            this.isShowModel = !this.isShowModel
            // 重新请求地质在 router部分会进行拦截跳转到user界面
            this.$router.push('/')
          }, 500)
        } else {
          this.disabledFlag = false
          this.$toast(res.msg)
        }
      }).catch(e => {
        this.$toast(e)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.warning {
  margin: 15px 0; padding: 15px;
  font-size: 13px; line-height: 32px; text-align: center;
  color: #f60;
  background: #fff;
}
</style>
